<template>
  <el-row gutter="30">
    <!-- 餐厅图片 -->
    <el-col :span="10">
      <img :src="restaurant.image" alt="restaurant" class="restaurant-img" />
    </el-col>

    <!-- 餐厅信息 -->
    <el-col :span="14">
      <h2 class="restaurant-name">{{ restaurant.name }}</h2>
      <p class="restaurant-description">{{ restaurant.description }}</p>
      <el-rate v-model="restaurant.rating" disabled class="restaurant-rating"></el-rate>
    </el-col>
  </el-row>

  <div class="menu">
    <h3 class="menu-title">菜品列表</h3>
    <el-table :data="menuItems" class="menu-table">
      <el-table-column label="菜品" prop="name"/>
      <el-table-column label="价格" prop="price"/>
      <el-table-column label="图片" prop="image">
        <template v-slot="scope">
          <img :src="scope.row.image" alt="menu" class="menu-img"/>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 用户评论 -->
  <div class="reviews">
    <h3 class="reviews-title">用户评论</h3>

    <!-- 用户评分和评论输入 -->
    <el-rate v-model="newRating" class="review-rating" @change="handleRatingChange"></el-rate>
    <el-input v-model="newReview" placeholder="请输入评论" type="textarea" rows="4"
              class="review-input"></el-input>
    <el-button type="primary" class="submit-btn" @click="submitReview">提交评论</el-button>

    <!-- 评论列表 -->
    <div class="review-list">
      <el-divider/>
      <div v-for="(review, index) in paginatedReviews" :key="index" class="review-item">
        <el-rate v-model="review.rating" disabled class="review-item-rating"></el-rate>
        <p class="review-comment">{{ review.comment }}</p>
      </div>
    </div>

    <!-- 分页组件 -->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="reviews.length"
        @current-change="handlePageChange"
        layout="prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script setup>
import {computed, reactive, ref} from 'vue';
import {
  ElRow,
  ElCol,
  ElRate,
  ElTable,
  ElTableColumn,
  ElInput,
  ElButton,
  ElDivider
} from 'element-plus';

const restaurant = ref({
  id: 1,
  name: '餐厅 A',
  description: '这是一家非常棒的餐厅，提供美味的食物。',
  image: require('@/assets/restaurantA.jpg'),
  rating: 4.5
});

const menuItems = ref([
  {name: '菜品 1', price: '¥30', image: require('@/assets/food1.jpg')},
  {name: '菜品 2', price: '¥45', image: require('@/assets/food2.jpg')},
  {name: '菜品 3', price: '¥15', image: require('@/assets/food3.jpg')},
  {name: '菜品 4', price: '¥40', image: require('@/assets/food4.jpg')}
]);

const reviews = reactive([
  { rating: 4, comment: '很不错！' },
  { rating: 5, comment: '非常好吃！' },
  { rating: 3, comment: '还行吧。' },
  { rating: 4, comment: '很不错！' },
  { rating: 5, comment: '非常好吃！' },
  { rating: 3, comment: '还行吧。' },
]);

// 4. 评论分页控制
const currentPage = ref(1);
const pageSize = ref(5);

// 计算分页后的评论
const paginatedReviews = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return reviews.slice(start, end);
});

// 5. 新评论数据
const newRating = ref(0);
const newReview = ref('');

// 6. 处理评分变化
const handleRatingChange = () => {
  // 在此可以添加评分时的逻辑
};

// 7. 提交评论
const submitReview = () => {
  if (!newReview.value.trim()) {
    // 提示用户输入评论
    alert('请输入评论内容');
    return;
  }
  if (newRating.value === 0) {
    // 提示用户评分
    alert('请给出评分');
    return;
  }

  // 新评论对象
  const newComment = {
    rating: newRating.value,
    comment: newReview.value,
  };

  // 将新评论加入评论数组
  reviews.push(newComment);

  // 重置输入框和评分
  newReview.value = '';
  newRating.value = 0;

  // 重新计算分页后的评论
  currentPage.value = Math.ceil(reviews.length / pageSize.value);
};

// 8. 处理分页切换
const handlePageChange = (page) => {
  currentPage.value = page;
};
</script>

<style scoped>
.restaurant-img {
  width: 100%; /* 设置图片的宽度为 100% */
  max-width: 330px; /* 限制最大宽度 */
  height: 200px; /* 保持图片的纵横比 */
  object-fit: cover; /* 保证图片内容不变形，并适配容器 */
  border-radius: 8px; /* 圆角效果，提升视觉效果 */
}

.restaurant-detail {
  padding: 20px;
  background-color: #FFF7E1; /* 温暖的浅黄色背景 */
  border-radius: 10px;
}

.aside {
  background-color: #FFDDC1; /* 桃红色背景 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.menu {
  margin-top: 20px;
  background-color: #FFE6CC; /* 浅橙色背景 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

.restaurant-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.restaurant-name {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.restaurant-description {
  font-size: 16px;
  color: #666;
  margin-top: 10px;
}

.restaurant-rating {
  margin-top: 10px;
}

.menu-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #FF5733; /* 橙红色标题 */
}

.menu-table {
  width: 100%;
}

.menu-img {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}

.reviews-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #FF5733; /* 橙红色标题 */
}

.review-rating {
  margin-bottom: 10px;
}

.review-input {
  margin-top: 10px;
  width: 100%;
  margin-bottom: 20px;
}

.submit-btn {
  margin-top: 10px;
  width: 100%;
  background-color: #FF7043; /* 深橙色 */
  color: white;
  border-color: #FF7043;
}

.submit-btn:hover {
  background-color: #FF5733; /* 更加鲜艳的橙红色 */
  border-color: #FF7043;
}

.review-list {
  margin-top: 30px;
}

.review-item {
  margin-bottom: 20px;
}

.review-item-rating {
  margin-bottom: 8px;
}

.review-comment {
  font-size: 16px;
  color: #333;
}
</style>
